<!DOCTYPE html>
<html>
  <head>
    <title>tab demo</title>
    <style>
      /*  reset */
      * {
        margin: 0;
        padding: 0;
      }
      ul,
      li {
        text-decoration: none;
      }

      .tab {
        width: 100%;
      }
      .tab .tab-header {
        position: relative;
        width: 100%;
        height: 46px;
        margin-bottom: 16px;
        display: flex;
        border-bottom: 1px solid rgb(240, 240, 240);
      }
      .tab .underline {
        position: absolute;
        width: 100px;
        height: 2px;
        bottom: -1px;
        background-color: #1890ff;
        transition: 0.3s;
      }
      .tab .tab-header li {
        height: 100%;
        margin: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;

        cursor: pointer;
        font-size: 16px;
      }
      .tab .tab-body {
        width: 100%;
      }
      .tab .tab-content {
        width: 100%;
      }
    </style>
    <script>
      function handleTab($el) {
        const $header = $el.querySelector(".tab-header");
        const $titles = $header.children;
        const $contents = $el.querySelector(".tab-body").children;
        let currentIndex = null;

        const $underline = document.createElement("div");
        $underline.setAttribute("class", "underline");
        $underline.setAttribute("display", "none");
        $header.append($underline);

        Array.prototype.forEach.call($contents, ($content) => {
          $content.style.display = "none";
        });

        Array.prototype.forEach.call($titles, ($title, i) => {
          $title.addEventListener("click", () => {
            toggle(i);
          });
        });

        function toggle(i) {
          if (currentIndex !== null) {
            $titles[currentIndex].setAttribute("class", "");
            $contents[currentIndex].setAttribute("style", "display: none");
          } else {
            $underline.setAttribute("style", "display: block");
          }

          const $title = $titles[i];
          $contents[i].setAttribute("style", "display: block");
          $title.setAttribute("class", "active");
          $underline.setAttribute("style", "left: " + $title.offsetLeft + "px; width:" + $title.clientWidth + "px;");
          currentIndex = i;
        }

        toggle(0);

      }
      window.onload = () => {
        $tabs = document.querySelectorAll(".tab");
        Array.prototype.forEach.call($tabs, ($tab) => {
          handleTab($tab);
        });
      };
    </script>
  </head>
  <body>
    <div class="tab">
      <ul class="tab-header">
        <li>tabTitle1</li>
        <li>tabTitle2</li>
        <li>tabTitle3</li>
      </ul>
      <div class="tab-body">
        <div class="tab-content">内容1</div>
        <div class="tab-content">内容2</div>
        <div class="tab-content">内容3</div>
      </div>
    </div>

    <div class="tab">
        <ul class="tab-header">
          <li>tabTitle1</li>
          <li>tabTitle2</li>
          <li>tabTitle3</li>
        </ul>
        <div class="tab-body">
          <div class="tab-content">内容1</div>
          <div class="tab-content">内容2</div>
          <div class="tab-content">内容3</div>
        </div>
      </div>
  </body>
</html>
